<!-- 无接口待开发 -->
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { addUser } from '@/api/platform-management';

  const form = ref({
    account: '',
    username: '',
  });
  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      showDrawer.value = newValue;
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      form.value.account = '';
      form.value.username = '';
      booleanStore.toggleBool2(0);
    }
  }
  function handleCancel() {
    form.value.account = '';
    form.value.username = '';
    booleanStore.toggleBool2(0);
  }
  async function handleSubmit() {
    const data = await addUser(form.value);
    console.log(data);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '修改成功',
        closable: true,
      });
      booleanStore.toggleBool2(0);
    } else {
      Notification.error({
        title: '失败',
        content: '修改失败',
        closable: true,
      });
      booleanStore.toggleBool2(0);
    }
    form.value.account = '';
    form.value.username = '';
    booleanStore.watchUpdate(25);
  }
</script>

<template>
  <a-drawer
    :width="400"
    :height="340"
    :visible="showDrawer"
    placement="right"
    unmount-on-close
    :footer="false"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
  >
    <template #title> 新增用户 </template>
    <div>
      <a-form :model="form" :style="{ width: '350px' }" @submit="handleSubmit">
        <a-form-item field="name" label="用户名:">
          <a-input v-model="form.account" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item field="name" label="工号:">
          <a-input v-model="form.username" placeholder="请输入工号" />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit" class="add">添加</a-button>
          <a-button html-type="reset" class="clear">清空</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
